<template>
  <section class="container new-password">
    <p class="hello">设置新密码</p>
    <template v-if="shopData.count === 1">
      <p class="text">您的用户名为： {{ shopData.shop['0'].username }}</p>
      <ElForm ref="form" :model="form" status-icon class="login-form">
        <ElFormItem label="请设置您的新密码" prop="password">
          <ElInput
            v-model="form.password"
            type="password"
            auto-complete="off"
          ></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton class="submit-button" type="primary" @click="submit"
            >下一步</ElButton
          >
        </ElFormItem>
      </ElForm>
    </template>
    <template v-else>
      <p class="intro">
        提示：手机号{{ phone }}绑定多家门店，请选择要找回密码的门店名称
      </p>
      <ElForm ref="form" :model="form" status-icon class="login-form">
        <ElFormItem>
          <ElSelect v-model="form.shop" placeholder="请选择要找回密码的门店">
            <ElOption
              v-for="(shop, index) in shopData.shop"
              :key="index"
              :label="shop.shop_name"
              :value="shop.id"
            ></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem
          v-if="form.shop"
          :label="'门店账号：' + username + '，请设置您的新密码'"
          prop="password"
        >
          <ElInput
            v-model="form.password"
            type="password"
            auto-complete="off"
          ></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton
            class="submit-button"
            type="primary"
            @click="submitMuiltShops"
            >下一步</ElButton
          >
        </ElFormItem>
      </ElForm>
    </template>
  </section>
</template>

<script>
import {http, catchAppError} from '@/util';
import url from '@/config';

export default {
  name: 'ResetPassword',
  props: {
    shopData: {
      type: Object,
      default: () => ({})
    },
    phone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: this.$route.query.name,
      form: {
        password: '',
        shop: ''
      }
    };
  },
  computed: {
    username() {
      return this.shopData.shop.find(shop => shop.id === this.form.shop)
        .username;
    }
  },
  methods: {
    submit() {
      const allIsCheck = this.form.password;
      if (!allIsCheck) {
        this.$message({
          message: '选项不能为空',
          duration: 5000,
          type: 'error'
        });
        return;
      }
      this.upPass({
        username: this.username,
        password: this.form.password
      });
    },
    submitMuiltShops() {
      const allIsCheck = this.form.password && this.form.shop;
      if (!allIsCheck) {
        this.$message({
          message: '选项不能为空',
          duration: 5000,
          type: 'error'
        });
      }
      this.upPass({
        username: this.username,
        password: this.form.password,
        id: this.form.shop
      });
    },
    upPass(params) {
      http
        .post(url.upPass, params)
        .then(res => {
          window.localStorage.removeItem('password');
          try {
            window.localStorage.setItem(
              'username',
              JSON.stringify({username: this.username})
            );
            // eslint-disable-next-line no-empty
          } catch (e) {}
          this.$router.push('/login');
        })
        .catch(catchAppError);
    }
  }
};
</script>

<style lang="scss">
.new-password {
  .el-input__inner {
    height: 44px;
    line-height: 44px;
    border-radius: 0;
    border-color: #b3b3b3;
  }
  .hello {
    font-weight: bold;
    font-size: 30px;
  }
  .login-form,
  .hello {
    width: 320px;
    margin-left: 70px;
  }

  .login-form {
    position: relative;
    .el-select {
      width: 100%;
    }
    .submit-button {
      width: 166px;
      height: 50px;
      margin-top: 30px;
      background-color: #4b90ff;
      color: #fff;
    }
    .el-form-item__label {
      float: none;
      text-align: left;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
